import 'package:flutter/material.dart';
import 'package:jd_shopping/services/ScreenAdaper.dart';
import 'package:jd_shopping/RequestMethod/httpRequestMtehod.dart';
import 'package:jd_shopping/Model/PcateModel.dart';
import 'package:jd_shopping/HttpRequest/configDomain.dart';

class Category extends StatefulWidget {
  @override
  _CategoryState createState() => _CategoryState();
}

class _CategoryState extends State<Category>
    with AutomaticKeepAliveClientMixin {
  int _selectIndex = 0;
  List _leftCateList = [];
  List _rightCateList = [];

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    HttpRequestMethod.getPcatetData('0').then((response) {
      var focusList = CateModel.fromJson(response.data);
      setState(() {
        this._leftCateList = focusList.result;
        print('this._leftCateList----->${this._leftCateList}');
        _getPcatetDataWithPid('59f1e1ada1da8b15d42234e9');
      });
    });
    //TODO: implement initState
    super.initState();
  }

  _getPcatetDataWithPid(String queryParameters) {
    HttpRequestMethod.getPcatetData(queryParameters).then((response) {
      var focusList = CateModel.fromJson(response.data);
      setState(() {
        this._rightCateList = focusList.result;
        print(' this._rightCateList----->${this._rightCateList}');
      });
    });
  }

  Widget _leftCateWidget(leftWidth) {
    if (this._leftCateList.length > 0) {
      return Container(
        width: leftWidth,
        height: double.infinity,
        // color: Colors.red,
        child: ListView.builder(
          itemCount: this._leftCateList.length,
          itemBuilder: (context, index) {
            return Column(
              children: <Widget>[
                InkWell(
                  onTap: () {
                    setState(() {
                      _selectIndex = index;
                      this._getPcatetDataWithPid(
                          "${this._leftCateList[index].sId}");
                    });
                  },
                  child: Container(
                    width: double.infinity,
                    height: ScreenAdaper.height(84),
                    padding: EdgeInsets.only(top: ScreenAdaper.height(24)),
                    child: Text("${this._leftCateList[index].title}",
                        textAlign: TextAlign.center),
                    color: _selectIndex == index
                        ? Color.fromRGBO(240, 246, 246, 0.9)
                        : Colors.white,
                  ),
                ),
                Divider(height: 1),
              ],
            );
          },
        ),
      );
    } else {
      return Container(width: leftWidth, height: double.infinity);
    }
  }

  //推荐商品
  Widget _getRightCateData(rightItemWidth) {
    return Expanded(
      flex: 1,
      child: Container(
        padding: EdgeInsets.all(10),
        height: double.infinity,
        child: Wrap(
          runSpacing: 10,
          spacing: 10,
          children: this._rightCateList.map((value) {
            //图片
            String sPic = value.pic;
            sPic = ConfigDomian.domain + '/' + sPic.replaceAll('\\', '/');
            return Container(
              padding: EdgeInsets.all(10),
              width: rightItemWidth,
              height: rightItemWidth + ScreenAdaper.height(68),
              decoration: BoxDecoration(
                  border: Border.all(
                      color: Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
              child: InkWell(
                onTap: () {
                  Navigator.pushNamed(context, '/productList',
                      arguments: {"cid": value.sId});
                },
                child: Column(
                  children: <Widget>[
                    Container(
                      width: double.infinity,
                      child: AspectRatio(
                        //防止服务器返回的图片大小不一致导致高度不一致问题
                        aspectRatio: 1 / 1,
                        child: Image.network(
                          sPic,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Container(
                      height: ScreenAdaper.height(68),
                      //padding: EdgeInsets.only(top: ScreenAdaper.height(20)),
                      child: Text(
                        '${value.title}',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.black54),
                      ),
                    )
                  ],
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  Widget _rightCateWidget(rightItemWidth, rightItemHeight) {
    if (this._rightCateList.length > 0) {
      return Expanded(
        flex: 1,
        child: Container(
            padding: EdgeInsets.all(10),
            height: double.infinity,
            color: Color.fromRGBO(240, 246, 246, 0.9),
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  childAspectRatio: rightItemWidth / rightItemHeight,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10),
              itemCount: this._rightCateList.length,
              itemBuilder: (context, index) {
                //图片
                String sPic = this._rightCateList[index].pic;
                sPic = ConfigDomian.domain + '/' + sPic.replaceAll('\\', '/');
                return InkWell(
                  onTap: () {
                    Navigator.pushNamed(context, '/productList', arguments: {
                      "cid": this._rightCateList[index].sId,
                      "title": this._rightCateList[index].title
                    });
                  },
                  child: Container(
                    // padding: EdgeInsets.all(10),
                    child: Column(
                      children: <Widget>[
                        AspectRatio(
                          aspectRatio: 1 / 1,
                          child: Image.network(sPic, fit: BoxFit.cover),
                        ),
                        SizedBox(height: ScreenAdaper.height(10)),
                        Container(
                          height: ScreenAdaper.height(38),
                          child: Text(
                            "${this._rightCateList[index].title}",
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.black54,
                                fontSize: ScreenAdaper.size(30)),
                          ),
                        )
                      ],
                    ),
                  ),
                );
              },
            )),
      );
    } else {
      return Expanded(
          flex: 1,
          child: Container(
            padding: EdgeInsets.all(10),
            height: double.infinity,
            color: Color.fromRGBO(240, 246, 246, 0.9),
            child: Text("加载中..."),
          ));
    }
  }

Widget _searchBar() {
    return AppBar(
      leading: IconButton(
          icon: Icon(Icons.center_focus_weak, size: 28, color: Colors.black87),
          onPressed: null,
        ),
        title: InkWell(
          child: Container(
            height: ScreenAdaper.height(68),
            decoration: BoxDecoration(
              color: Color.fromRGBO(233, 233, 233, 0.8),
              borderRadius: BorderRadius.circular(30)
            ),
            padding: EdgeInsets.only(left: 10),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.search),
                Text("笔记本",style: TextStyle(
                  fontSize: ScreenAdaper.size(28)
                ))
              ],
            ),
          ),
          onTap: (){
              Navigator.pushNamed(context, '/search');
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.message, size: 28, color: Colors.black87),
            onPressed: null,
          )
        ],
    );
  }
  @override
  Widget build(BuildContext context) {
    ScreenAdaper.init(context);
    //左侧宽度
    var leftWidth = ScreenAdaper.getScreenWidth() / 4.0;
    var rightItemWidth =
        (ScreenAdaper.getScreenWidth() - leftWidth - 20 - 20) / 3.0;
    //获取计算后的高度
    var rightItemHeight = rightItemWidth + ScreenAdaper.height(48);
    return Scaffold(
      appBar: _searchBar(),
      body: Row(
        children: <Widget>[
          _leftCateWidget(leftWidth),
          //_getRightCateData(rightItemWidth)
          _rightCateWidget(rightItemWidth, rightItemHeight)
        ],
      ),
    );
  }
}
